<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useUserInfo from '@/stores/userInfo';

const stores = useUserInfo();
const { userInfo } = storeToRefs(stores);
</script>

<template>
	<div class="personal">
		<div class="personal-header">个人信息</div>
		<div class="personal-body">
			<div class="personal-img">
				<img :src="userInfo?.avatarUrl" />
			</div>
			<div class="personal-main">
				<div class="personal-title">早上好,{{ userInfo?.name }},生活变的再糟糕,也不妨碍我变得更好!</div>
				<div class="personal-text">
					<div class="personal-row">
						<div class="personal-item-label">昵称：{{ userInfo?.name }}</div>
						<div class="personal-item-value">身份：{{ userInfo?.role }}</div>
					</div>
					<div class="personal-row">
						<div class="personal-item-label"></div>
						<div class="personal-item-value"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
